<template>
    <div class="indexVideo" v-show="isShow" >
      <div class="swiper-container indexVideoContainer">
          <div class="swiper-wrapper">
              <div class="swiper-slide" v-for ="(item,index) in video">
                 <div class="silderVideo">
                      <video id="myvideo" :src="item.media" controls="controls" >
                          your browser does not support the video tag
                      </video>
<!--                     <video poster="../assets/img/stape.png" id="videoid"  controls="controls">
                      <source  :src="item.media" type="video/mp4" />
                           你的浏览器不支持H5播放器
                    </video> -->
                </div>
              </div>
          </div>
          <div class="swiper-button-next indexVideoNext"></div>
          <div class="swiper-button-prev indexVideoPrev"></div>
      </div>
    </div>
</template>
<script>
export default {
    name: "indexVideo",
    data () {
      return {
          name:'我要测试首页',
          video:[],
          url:'/api/medias?location=20',
          isShow:false
      }
    },
    watch: {
      video: function() {
          this.$nextTick(function(){
            var swiper = new Swiper('.indexVideoContainer', {
              lazy: {
                loadPrevNext: true, 
                loadPrevNextAmount: 1,
                loadOnTransitionStart: true,

              },
              navigation: {
                nextEl: '.indexVideoNext',
                prevEl: '.indexVideoPrev',
              },
            });           
          })
      }
    },
    methods: {
        getVideo () {
          this.$loading(this.$t("contact.loading"));
          let self = this;
          axios.get(self.url)
            .then(function (response) {
               if(response.data.data == undefined || response.data.data.length <= 0 ){
                   self.isShow = false;
               }else{
                  self.isShow = true;
                  self.video = response.data.data;
               }
               self.closeLoading();
            })
            .catch(function (error) {
                console.log(JSON.stringify(error));
            })  
        },
        closeLoading(){
           this.$loading.close();
        }
    },
    created:function () {
       this.getVideo();
    }
};
</script>
<style scoped>
   .indexVideoContainer{width:86%;height:430px;margin:0px auto;}
   .silderVideo{width:78%;height:100%;/*background:#ead3b0;*/margin:0px auto;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center; justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;font-size:3rem;color:#fff;}
   .silderVideo video{height:100%;max-width: 100%;}
   @media screen and (max-width: 768px) {
       .indexVideoContainer{width:98%;height:280px;margin:0px auto;}
       .silderVideo{width:76%;font-size:1.5rem;}
   }
</style>